<template>
	<view class="fun-flex-col page">
		<scroll-view scroll-y="true" class="group" enable-back-to-top="true" @scrolltolower="scrolltolower" :style="{height: (windosHeight - 60 - 32) + 'px'}">
			<view class="fun-flex-col fun-items-center fixed-bg">
				<text class="text_3">{{fixInfo.productName}} </text>

				<view class="fun-flex-row fun-justify-between equal-division">
					<view class="fun-flex-col fun-items-center equal-division-item">
						<text class="font_2">Principal</text>
						<text class="money fun-mt-6">{{fixInfo.positionAmount}}</text>
					</view>
					<view class="fun-flex-col fun-items-center equal-division-item">
						<text class="font_2">Yesterday’s Return</text>
						<text class="money fun-mt-6 fall-text" v-if='fixInfo.yesterdayprofit < 0'>{{fixInfo.yesterdayprofit}}</text>
						<text class="money fun-mt-6 rise-text" v-else>+{{fixInfo.yesterdayprofit}}</text>
					</view>
					<view class="fun-flex-col fun-items-center equal-division-item">
						<text class="font_2">Cumulative Return</text>
						<text class="money fun-mt-6 fall-text" v-if='fixInfo.countprofit < 0'>{{fixInfo.countprofit}}</text>
						<text class="money fun-mt-6 rise-text" v-else>+{{fixInfo.countprofit}}</text>
					</view>
				</view>
				
				<view class="fun-flex-row fun-justify-between equal-division">
					<view class="fun-flex-col fun-items-center equal-division-item">
						<text class="font_2">Anuulized Return</text>
						<text class="money money_grey fun-mt-6">{{fixInfo.yearRate}}%</text>
					</view>
					<view class="fun-flex-col fun-items-center equal-division-item">
						<text class="font_2">In Purchase</text>
						<text class="money money_grey fun-mt-6">{{fixInfo.buyingAmount}}</text>
					</view>
					<view class="fun-flex-col fun-items-center equal-division-item">
						<text class="font_2">In Redemption</text>
						<text class="money money_grey fun-mt-6">{{fixInfo.redeemAmount}}</text>
					</view>
				</view>
			</view>
			
			<view class="content">
				<view class="title">Transaction Records</view>
				
				<view class="list-wrap">
					<view class="fun-flex-row fun-justify-between list" v-for="(item, index) in fixedTradeList" :key="index">
						<view class="fun-flex-col fun-justify-between left">
							<text class="purchase">{{item.tradingType | tradeFilter}}</text>
							<text class="amount" :class="item.amount < 0 ? 'fall-text' : 'rise-text'">{{removeMinusSign(item.amount)}}</text>
						</view>
						
						<view class="fun-flex-col fun-justify-between fun-items-end right">
							<text class="status progress" v-if='item.status == 1'>IN PROGRESS</text>
							<text class="status completed" v-if='item.status == 2'>COMPLETED</text>
							<text class="status failed" v-if='item.status == 3'>FAILED</text>
							<text class="time">{{UTILS.setDateFormat(item.time)}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="fun-flex-row fun-justify-between btn_wrap">
			<view class="principal" @click="redeem">Redeem Principal</view>
			<view class="purchase" @click="additional">Additional Purchase</view>
		</view>
	</view>
</template>

<script>
	import {getTimeZone,removeMinusSign} from "@/common/js/func.js"
	import {fixedOrder,fixedTrade} from "@/api/home.js"
	export default {
		data() {
			return {
				queryData:{
					page:1,
					limit:10, 
					orderID:2, 
					timeZone:8
				},
				isActive:1,
				fixInfo:{},
				fixedTradeList:[],
				total:0,
				removeMinusSign,
				windosHeight:"" //可使用窗口高度(不包含NavigationBar和TabBar的高度)
			};
		},
		
		onLoad() {
			this.queryData.timeZone = getTimeZone();
			uni.getSystemInfo({
				success: res => {
					this.windosHeight = res.windowHeight
				}
			})
			this.getFixedOrder();
		},

		methods: {
			getFixedOrder(){
				fixedOrder().then(res => {
					if(res.code == 0){
						this.fixInfo = res.data || {};
						this.queryData.orderID = this.fixInfo.orderId;
						this.getFixedTrade()
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			getFixedTrade(){
				fixedTrade(this.queryData).then(res => {
					if(res.code == 0){
						this.fixedTradeList = this.fixedTradeList?.concat(res.data) || [];
						this.total = res.count;
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			// 触底加载更多
			scrolltolower(){
				if (this.total > this.fixedTradeList.length) {
					this.queryData.page++;
					this.getFixedTrade();
				}
			},
			additional(){
				const pid = this.fixInfo.productId;
				const title = this.fixInfo.productName;
				const minimumAmount = this.fixInfo.minimumamount;
				uni.navigateTo({
					url:'/pages/products/buy?pid='+pid+'&title='+title+'&minimumAmount='+minimumAmount
				})
			},
			redeem(){
				const orderId = this.fixInfo.orderId;
				const title = this.fixInfo.productName;
				const minimumAmount = this.fixInfo.minimumamount;
				const positionAmount = this.fixInfo.positionAmount;
				uni.navigateTo({url:'/pages/home/redeem?title='+encodeURIComponent(title)+'&orderId='+encodeURIComponent(orderId)+'&minimumAmount='+encodeURIComponent(minimumAmount)+'&positionAmount='+encodeURIComponent(positionAmount)})
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		padding: 28rpx;
		.group {
			// height:calc(100% - 45px - 20px);
			// overflow: auto;
			.fixed-bg{
				width: 100%;
				background: url("@/static/home/invest_bg.png") no-repeat center;
				background-size: 100% 100%;
				padding: 24rpx;
			}
			.text_3 {
				margin-bottom: 24rpx;
				font-size: 32rpx;
				font-family: Microsoft YaHei UI;
				font-weight: 700;
			}
			.equal-division {
				width: 100%;
				.equal-division-item {
					.font_2 {
						font-size: 24rpx;
						color: #000000;
					}
					
					.money {
						font-size: 32rpx;
						font-weight: 700;
						color: #52844F
					}
					.money_grey{
						font-weight: 400;
						color: #000000;
					}
				}
			}
			.equal-division:not(:last-child){
				margin-bottom: 32rpx;
			}
			
			.content{
				.title{
					padding: 16rpx 0;
					border-bottom: 2rpx solid rgba(176,177,191,0.14);
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
					line-height: 40rpx;
				}
				.list-wrap {
					.list{
						padding: 16rpx 0;
						border-bottom: 2rpx solid rgba(176,177,191,0.14);
						.left {
							.purchase{
								font-weight: 600;
								margin-bottom: 12rpx;
								line-height: 40rpx;
							}
							.amount{
								font-weight: 600;
								ine-height: 32rpx;
								
							}
							
						}
						.right {
							.status{
								width: 168rpx;
								height: 40rpx;
								margin-bottom: 12rpx;
								text-align: center;
								line-height: 40rpx;
								border-radius: 4rpx;
								font-size: 24rpx;
							}
							.progress{
								background: #FDF0BA;
								color: #8C7F44;
							}
							.completed{
								background: #E9FAF0;
								color: #51844D;
							}
							.failed{
								background: rgba(255,146,165,0.3);
								color: #CA5456;
							}
							.time{
								font-size: 20rpx;
								color: #979797;
								line-height: 30rpx;
							}
						}
					}
				}
			}
		}
		
		.btn_wrap {
			font-weight: bold;
			margin-top:32rpx;
			.principal {
				border-radius: 10rpx;
				padding: 24rpx 40rpx 24rpx 40rpx;
				background-color: #ffffff;
				border: solid 2rpx #1a7b99;
				color: #1a7b99;
			}
		
			.purchase {
				border-radius: 10rpx;
				padding: 24rpx 32rpx 24rpx 32rpx;
				background-color: #1a7b99;
				color: #ffffff;
			}
		}
	}
</style>